<!--
滚动条参数配置
-->

<template>
  <div class="mc-scroll-config">
        <el-form label-width="60px" size="mini">
          <el-form-item label="启用">
               <el-switch v-model="form.open"></el-switch>
          </el-form-item>
          <el-form-item label="悬停停止" v-if="form.open">
               <el-switch v-model="form.hoverStop"></el-switch>
          </el-form-item>
          <el-form-item label="方向" v-if="form.open">
             <el-select v-model="form.direction">
                 <el-option :value="0" label="从上往下"></el-option>
                 <el-option :value="1" label="从下往上"></el-option>
                 <el-option :value="2" label="左右滚动"></el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="左右" v-if="form.direction==2 && form.open">
             <el-select v-model="form.limitMoveNum">
                 <el-option :value="2" label="向右滚动"></el-option>
                 <el-option :value="4" label="向左滚动"></el-option>
             </el-select>
          </el-form-item>
         <el-form-item label="滚速" v-if="form.open">
              <el-slider v-model="form.step" :min="0" :step="0.1" :max="5"></el-slider>
          </el-form-item>

         <el-form-item label="停顿高" v-if="form.open">
              <el-slider v-model="form.singleHeight" :min="0" :max="1000"></el-slider>
          </el-form-item>

           <el-form-item label="停顿时间" v-if="form.singleHeight>0 && form.open">
              <el-slider v-model="form.waitTime" :min="0" :max="10000"></el-slider>
          </el-form-item>
          <el-form-item label="滚动最小条数" v-if="form.open">
              <el-slider v-model="form.limitMoveNum" :min="0" :max="200"></el-slider>
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
export default {
    name: 'mc-scroll-config',
    data () {
        return {
            form:this.data,
        }
    },
    props:["data"],
    watch:{

    },
    mounted () {
      if(typeof this.form.limitMoveNum == 'undefined'){
        this.form.limitMoveNum = 5;
      }
    },
    methods:{
        saveConfig:function(){
            this.$emit("save-data",this.form);
        }
    }
}
</script>

<style lang="scss">
    .mc-scroll-config{
        .el-form-item{
            margin-top:10px;
        }
        .el-select{
            width:99%;
        }
    }

</style>
